<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375, initial-scale=1.0">
    <title>接单 - 三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
        }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #000;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .content-area {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
        }
        .content-area::-webkit-scrollbar {
            width: 4px;
        }
        .content-area::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .content-area::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 2px;
        }
        .bottom-nav {
            height: 64px;
            background: white;
            border-top: 1px solid #e5e7eb;
            margin: 0 12px;
            border-radius: 0 0 32px 32px;
        }
        .tab-item {
            position: relative;
            padding: 12px 16px;
            color: #6B7280;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tab-item i {
            font-size: 12px;
        }
        /* 只为价格和保证金的Tab项添加箭头动画 */
        .tab-item[data-type="price"] i,
        .tab-item[data-type="deposit"] i {
            transition: transform 0.3s;
        }
        .tab-item i.active {
            color: #3B82F6;
            transform: rotate(180deg);
        }
        .tab-item i:not(.active) {
            color: #6B7280;
        }
        .tab-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            min-width: 100px;
            z-index: 100;
            display: none;
        }
        .tab-dropdown.show {
            display: block;
        }
        .tab-dropdown-item {
            padding: 12px 16px;
            color: #6B7280;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .tab-dropdown-item:hover {
            background: #F3F4F6;
            color: #3B82F6;
        }
        .tab-item.active {
            color: #3B82F6;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 16px;
            right: 16px;
            height: 2px;
            background: #3B82F6;
            border-radius: 1px;
        }
        .order-card {
            background: white;
            border-radius: 8px;
            padding: 10px 12px;
            margin: 8px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            border: 1px solid #f0f0f0;
        }
        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }
        .order-title {
            font-size: 14px;
            font-weight: 500;
            color: #1F2937;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-price {
            font-size: 18px;
            font-weight: bold;
            color: #EF4444;
            text-align: right;
            margin-left: 8px;
            white-space: nowrap;
        }
        .order-info {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
            display: flex;
            align-items: center;
        }
        .order-info:not(:last-child) {
            margin-bottom: 2px;
        }
        .order-info-separator {
            margin: 0 6px;
            color: #E5E7EB;
        }
        .order-tags {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            flex-wrap: wrap;
        }
        .order-tag {
            padding: 1px 6px;
            background: #F9FAFB;
            border-radius: 3px;
            font-size: 11px;
            color: #6B7280;
        }
        .order-type-tag {
            padding: 1px 6px;
            background: #EFF6FF;
            border-radius: 3px;
            font-size: 11px;
            color: #3B82F6;
            margin-right: 6px;
        }
        .order-type-tag.rank { background: #eff6ff; color: #2563eb; }
        .order-type-tag.practice { background: #f0fdf4; color: #22c55e; }
        .order-type-tag.other { background: #f3f4f6; color: #6b7280; }
        .server-modal {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            background: white;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 50;
            display: none;
        }
        .server-modal.show {
            display: block;
        }
        .grabbed-order {
            opacity: 0.6;
            pointer-events: auto;
        }
        .grabbed-order:hover {
            box-shadow: 0 2px 8px rgba(255,0,0,0.08);
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="absolute left-0 right-0 flex justify-center items-center pointer-events-none">
                    <span class="text-base font-medium text-black tracking-wide leading-none">接单</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto z-10" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center cursor-pointer" title="退出">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- TabBar -->
            <div class="flex items-center justify-between bg-white border-b border-gray-100 relative">
                <div class="tab-item" data-type="order-type">
                    全部
                    <i class="fas fa-sort-down"></i>
                    <div class="tab-dropdown">
                        <div class="tab-dropdown-item" data-value="全部">全部</div>
                        <div class="tab-dropdown-item" data-value="排位">排位</div>
                        <div class="tab-dropdown-item" data-value="陪练">陪练</div>
                        <div class="tab-dropdown-item" data-value="其他">其他</div>
                    </div>
                </div>
                <div class="tab-item" data-type="price">
                    价格<i class="fas fa-sort-down"></i>
                </div>
                <div class="tab-item" data-type="deposit">
                    保证金<i class="fas fa-sort-down"></i>
                </div>
                <div class="tab-item" data-type="server">
                    区服<i class="fas fa-sort-down"></i>
                </div>
                <!-- 区服选择弹窗 -->
                <div id="server-modal" class="server-modal">
                    <div class="flex flex-1 overflow-hidden">
                        <!-- 区列表 -->
                        <div id="zone-list" class="flex-1 overflow-y-auto border-r">
                            <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="安卓-QQ">安卓-QQ</div>
                            <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="安卓-微信">安卓-微信</div>
                            <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="苹果-QQ">苹果-QQ</div>
                            <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="苹果-微信">苹果-微信</div>
                            <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="PC端">PC端</div>
                        </div>
                        <!-- 服列表 -->
                        <div id="server-list" class="flex-1 overflow-y-auto">
                            <div class="server-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-server="默认服">默认服</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 全部订单列表 -->
                <div id="all-orders" class="order-list">
                    <!-- 排位订单卡片 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag rank">排位</span>
                            代练青铜到黄金，要求24小时内完成，效率保证
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                    <span class="order-info-separator">|</span>
                                    <span>青铜Ⅲ → 黄金Ⅰ</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：24小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥50.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥100.0</div>
                        </div>
                    </div>
                    <!-- 陪练订单卡片 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag practice">陪练</span>
                            陪练上分，要求24小时内完成，效率保证
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：24小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥50.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥100.0</div>
                        </div>
                    </div>
                    <!-- 其他订单卡片 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag other">其他</span>
                            代练任务，要求48小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：48小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥100.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥200.0</div>
                        </div>
                    </div>
                    <!-- 排位订单卡片2 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag rank">排位</span>
                            代练白银到铂金，要求36小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-微信 - 默认服</span>
                                    <span class="order-info-separator">|</span>
                                    <span>白银Ⅱ → 铂金Ⅳ</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：36小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥80.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥150.0</div>
                        </div>
                    </div>
                    <!-- 陪练订单卡片2 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag practice">陪练</span>
                            陪练上分，要求12小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>苹果-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：12小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥30.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥80.0</div>
                        </div>
                    </div>
                    <!-- 已被抢订单卡片 -->
                    <div class="order-card grabbed-order relative cursor-pointer">
                        <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full z-10">已被抢</div>
                        <div class="order-title">
                            <span class="order-type-tag rank">排位</span>
                            代练黄金到铂金，要求12小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                    <span class="order-info-separator">|</span>
                                    <span>黄金Ⅱ → 铂金Ⅳ</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：12小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥60.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥120.0</div>
                        </div>
                    </div>
                </div>
                <!-- 排位订单列表 -->
                <div id="rank-orders" class="order-list hidden">
                    <!-- 订单卡片示例 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag rank">排位</span>
                            代练青铜到黄金，要求24小时内完成，效率保证
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                    <span class="order-info-separator">|</span>
                                    <span>青铜Ⅲ → 黄金Ⅰ</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：24小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥50.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥100.0</div>
                        </div>
                    </div>
                    <!-- 排位订单卡片2 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag rank">排位</span>
                            代练白银到铂金，要求36小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-微信 - 默认服</span>
                                    <span class="order-info-separator">|</span>
                                    <span>白银Ⅱ → 铂金Ⅳ</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：36小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥80.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥150.0</div>
                        </div>
                    </div>
                </div>
                <!-- 陪练订单列表 -->
                <div id="practice-orders" class="order-list hidden">
                    <!-- 订单卡片示例 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag practice">陪练</span>
                            陪练上分，要求24小时内完成，效率保证
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：24小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥50.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥100.0</div>
                        </div>
                    </div>
                    <!-- 陪练订单卡片2 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag practice">陪练</span>
                            陪练上分，要求12小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>苹果-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：12小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥30.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥80.0</div>
                        </div>
                    </div>
                </div>
                <!-- 其他订单列表 -->
                <div id="other-orders" class="order-list hidden">
                    <!-- 订单卡片示例 -->
                    <div class="order-card">
                        <div class="order-title">
                            <span class="order-type-tag other">其他</span>
                            代练任务，要求48小时内完成
                        </div>
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <div class="order-info">
                                    <span>安卓-QQ - 默认服</span>
                                </div>
                                <div class="order-info">
                                    <span>代练时限：48小时</span>
                                    <span class="order-info-separator">|</span>
                                    <span>保证金：¥100.0</span>
                                </div>
                            </div>
                            <div class="order-price">¥200.0</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom-nav flex items-center justify-around">
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-plus-circle text-xl"></i>
                    <span class="text-xs mt-1">发单</span>
                </button>
                <button class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-handshake text-xl"></i>
                    <span class="text-xs mt-1">接单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-clipboard-list text-xl"></i>
                    <span class="text-xs mt-1">订单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
        <!-- 微信小程序风格toast提示，居中显示在虚拟手机屏幕中间 -->
        <div id="toast-tip" style="display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.85);color:#fff;padding:10px 24px;border-radius:20px;font-size:15px;z-index:9999;pointer-events:none;">该订单已被接或下架</div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // TabBar切换逻辑
            const tabItems = document.querySelectorAll('.tab-item');
            const orderLists = {
                '全部': document.getElementById('all-orders'),
                '排位': document.getElementById('rank-orders'),
                '陪练': document.getElementById('practice-orders'),
                '其他': document.getElementById('other-orders')
            };

            // 处理订单类型下拉菜单
            const orderTypeTab = document.querySelector('.tab-item[data-type="order-type"]');
            const orderTypeDropdown = orderTypeTab.querySelector('.tab-dropdown');
            const orderTypeText = orderTypeTab.childNodes[0];
            const arrow = orderTypeTab.querySelector('.fa-sort-down');

            orderTypeTab.addEventListener('click', function(e) {
                e.stopPropagation();
                orderTypeDropdown.classList.toggle('show');
                
                // 切换箭头状态
                if (orderTypeDropdown.classList.contains('show')) {
                    arrow.classList.add('active');
                } else {
                    arrow.classList.remove('active');
                }
            });

            orderTypeDropdown.querySelectorAll('.tab-dropdown-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const value = this.dataset.value;
                    orderTypeText.textContent = value;
                    orderTypeDropdown.classList.remove('show');
                    
                    // 切换订单列表显示
                    Object.values(orderLists).forEach(list => list.classList.add('hidden'));
                    orderLists[value].classList.remove('hidden');

                    // 添加高亮样式
                    orderTypeTab.classList.add('active');
                    
                    // 切换箭头状态
                    arrow.classList.remove('active');
                });
            });

            // 点击其他区域关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!orderTypeTab.contains(e.target)) {
                    orderTypeDropdown.classList.remove('show');
                    // 切换箭头状态
                    arrow.classList.remove('active');
                }
            });

            // 初始化时设置高亮
            orderTypeTab.classList.add('active');

            // 处理其他Tab项点击
            tabItems.forEach(item => {
                if (item.dataset.type === 'order-type') return;
                
                item.addEventListener('click', function() {
                    // 移除所有active类
                    tabItems.forEach(tab => tab.classList.remove('active'));
                    // 添加active类到当前点击的item
                    this.classList.add('active');

                    // 处理区服选择弹窗
                    if (this.dataset.type === 'server') {
                        document.getElementById('server-modal').classList.add('show');
                        // 切换箭头状态
                        const icon = this.querySelector('i');
                        icon.classList.add('active');
                    } else {
                        document.getElementById('server-modal').classList.remove('show');
                        // 切换箭头状态
                        const icon = this.querySelector('i');
                        icon.classList.remove('active');
                    }

                    // 处理排序图标
                    if (this.dataset.type === 'price' || this.dataset.type === 'deposit') {
                        const icon = this.querySelector('i');
                        if (icon.classList.contains('fa-sort-down')) {
                            icon.classList.remove('fa-sort-down');
                            icon.classList.add('fa-sort-up');
                        } else {
                            icon.classList.remove('fa-sort-up');
                            icon.classList.add('fa-sort-down');
                        }
                    }
                });
            });

            // 区服选择逻辑
            const zones = ["安卓-QQ", "安卓-微信", "苹果-QQ", "苹果-微信", "PC端"];
            const servers = { "安卓-QQ": ["默认服"], "安卓-微信": ["默认服"], "苹果-QQ": ["默认服"], "苹果-微信": ["默认服"], "PC端": ["默认服"] };
            let selectedZone = null;
            let selectedServer = null;

            function renderZoneList() {
                const zoneList = document.getElementById('zone-list');
                zoneList.innerHTML = '';
                zones.forEach(zone => {
                    const div = document.createElement('div');
                    div.className = 'zone-item px-6 py-4 text-center text-base cursor-pointer';
                    if(zone === selectedZone) {
                        div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                    } else {
                        div.classList.add('text-gray-700');
                    }
                    div.dataset.zone = zone;
                    div.innerText = zone;
                    div.onclick = (e) => {
                        e.stopPropagation(); // 阻止事件冒泡
                        selectedZone = zone;
                        selectedServer = null; // 重置服务器选择
                        renderZoneList();
                        renderServerList();
                    };
                    zoneList.appendChild(div);
                });
            }

            function renderServerList() {
                const serverList = document.getElementById('server-list');
                serverList.innerHTML = '';
                if (!selectedZone) return;
                
                servers[selectedZone].forEach(server => {
                    const div = document.createElement('div');
                    div.className = 'server-item px-6 py-4 text-center text-base cursor-pointer';
                    if(server === selectedServer) {
                        div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                    } else {
                        div.classList.add('text-gray-700');
                    }
                    div.dataset.server = server;
                    div.innerText = server;
                    div.onclick = (e) => {
                        e.stopPropagation(); // 阻止事件冒泡
                        selectedServer = server;
                        renderServerList();
                        // 选择完服务器后自动关闭弹窗
                        document.getElementById('server-modal').classList.remove('show');
                        const serverTab = document.querySelector('.tab-item[data-type="server"]');
                        const serverIcon = serverTab.querySelector('i');
                        serverIcon.classList.remove('active');
                    };
                    serverList.appendChild(div);
                });
            }

            // 初始化区服列表
            renderZoneList();
            renderServerList();

            // 点击遮罩层关闭区服选择弹窗
            document.addEventListener('click', function(e) {
                if (e.target.closest('.tab-item[data-type="server"]')) return;
                if (e.target.closest('#server-modal')) return;
                document.getElementById('server-modal').classList.remove('show');
                // 重置区服箭头状态
                const serverTab = document.querySelector('.tab-item[data-type="server"]');
                const serverIcon = serverTab.querySelector('i');
                serverIcon.classList.remove('active');
            });

            // 已被抢订单点击提示（微信小程序风格toast）
            function showToast(msg) {
                var toast = document.getElementById('toast-tip');
                toast.innerText = msg;
                toast.style.display = 'block';
                clearTimeout(window._toastTimer);
                window._toastTimer = setTimeout(function(){
                    toast.style.display = 'none';
                }, 1500);
            }
            document.querySelectorAll('.grabbed-order').forEach(function(card) {
                card.addEventListener('click', function(e) {
                    e.stopPropagation();
                    showToast('该订单已被接或下架');
                });
            });
        });
    </script>
</body>
</html> 